<template>
    <div class="mac">
        <main>
            <div v-for="(item,index) in items" :key="index" class="item">
                <product-card :data="item"/>
            </div>
        </main>
        
        <div class="content">
            <img 
                v-for="(item,index) in imgs" 
                :key="index" 
                :src="item" 
            >
        </div>
    </div>
</template>
<script>
import ProductCard from '../components/productCard.vue'
export default{
    components:{
        ProductCard
    },
    data(){
        return{
            items:[
               {
                    name:'Apple MacBook Air 13.3',
                    price:'￥7999.00',
                    src:'https://img14.360buyimg.com/n0/jfs/t1/141480/8/14039/48663/5fab0686E7d32b85f/bb2489ac5d2b4ed5.jpg'
                },
                {
                    name:'Apple MacBook Pro 13.3 新款',
                    price:'￥9999.00',
                    src:'https://img14.360buyimg.com/n0/jfs/t1/125393/39/18221/47832/5fab078dEbc040aa5/590d4034236f65ef.jpg'
                },
                {
                    name:'Apple 2020款 MacBook Pro 13.3',
                    price:'￥17399.00',
                    src:'https://img14.360buyimg.com/n0/jfs/t1/120468/40/75/122046/5eb2c32eEca8b3caa/1031747eda0d5fc8.jpg'
                },
                {
                    name:'Apple 2019款 MacBook Pro 16',
                    price:'￥17399.00',
                    src:'https://img14.360buyimg.com/n0/jfs/t1/64979/31/15492/115459/5dd3d4f2E75b0a9a6/95c273eda00e67c0.jpg'
                }
            ],
            imgs:[
                'https://img14.360buyimg.com/n0/jfs/t1/140989/5/13821/58213/5fab0689E202779d6/96805568b0258356.jpg',
                'https://img14.360buyimg.com/n0/jfs/t1/138665/2/13906/25213/5fab0692Eadb45531/839ae662e3e61745.jpg',
                'https://img14.360buyimg.com/n0/jfs/t1/125972/40/17968/38384/5fab0696Ede508f62/5e457ccc49d42d54.jpg'
            ]
        }
    },
}
</script>
<style scoped>
.mac main{
    display: flex;
    margin-top: 1em;
}
.mac main>div+div{
    margin-left: 1em;
}
.mac .content{
    margin-top: 1em;
}
</style>
        